<template>
  <div class="common-layout">
    <el-container class="container-first">
      <el-header>
        <!-- 头部组件-->
        <nav-header v-model:collapse="isCollapse"></nav-header>
      </el-header>
    </el-container>
    <el-container class="container-second">
      <el-aside>
        <!--        侧边菜单栏组件-->
        <nav-side v-model:collapse="isCollapse"></nav-side>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import navHeader from './header/index.vue'
import navSide from './side/index.vue'
const isCollapse = ref<boolean>(false)

  let props = defineProps<{
  collapse: Boolean
}>()


</script>

<style lang="scss" scoped>
.el-header {
  width: 100%;
  padding: 0;
  border-bottom: 1px solid #eeeeee;
}

.el-aside{
  position: relative;
  width: 200px;
  border-bottom: 1px solid #eeeeee;
  
}


.container-first {
  width: 100%;
  position: relative;
}

.container-second {
  width: 100%;
  height: 100%;
}
</style>
